<template>
  <div class="ele-body">
    <div class="topBox flex">

      <div class="topLeft">

        <div class="topLeftL">
          <div class="topLeftLT">
            <div >投诉解决情况</div>
            <div >数量 &nbsp;&nbsp; 83</div>
          </div>
          <div class="topLeftLB">
            <div class="topLeftLBItem">
              <div >56</div>
              <div >已处理</div>
            </div>
            <div class="topLeftLBItem">
              <div >56</div>
              <div >已处理</div>
            </div>
            <div class="topLeftLBItem">
              <div >56</div>
              <div >已处理</div>
            </div>
          </div>
        </div>
        <div class="topLeftR" id="topLeftR" >
        </div>
      </div>
      <div class="topRight" id="topRight"></div>
    </div>
    <div class="middleBox flex">
      <div >
        <div class="middleLeft" id="middleLeft"></div>
        <div style="width: 100%;overflow: hidden">
          <el-table
            :data="tableData"
            size="mini"
            style="width: 100%">
            <el-table-column width="60">
              有效
            </el-table-column>
            <el-table-column
              prop="date"
              label="日期"
              width="100">
            </el-table-column>
            <el-table-column
              prop="name"
              label="姓名"
              width="80">
            </el-table-column>
            <el-table-column
              prop="address"
              label="地址">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="middleRight">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column
            prop="date"
            label="日期"
            width="100">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="80">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
        </el-table>
      </div>

    </div>

    <div class="bottomBox">
      <div id="bottomChart" class="bottomChart"></div>
      <div>
        <el-table
          :data="tableData"
          stripe
          size="mini"
          style="width: 100%">
          <el-table-column width="180">
            1
          </el-table-column>
          <el-table-column
            prop="date"
            label="日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';

export default {
  props: ['activeName'],
  data() {
    return {
      echartsGroup: [],
      styleKey: {
        'BC类总体满足率': {bg: '#e4f4ef', fc: '#1fa881'},
        '4小时到位率': {bg: '#e6edfa', fc: '#0754cf'},
        '24小时完工率': {bg: '#fff5d6', fc: '#fed13b'},
        '30天交货率': {bg: '#f5f5f5', fc: '#c5c5c5'}
      },
      BottomStyle: {
        '本月申请单': {bg: '#e4f4ef', fc: '#1fa881'},
        '本月未发单': {bg: '#e6edfa', fc: '#0754cf'},
        '24小时签收率': {bg: '#fff5d6', fc: '#fed13b'},
        '48小时签收率': {bg: '#f5f5f5', fc: '#c5c5c5'},
        '7天签收率': {bg: '#f5f5f5', fc: '#c5c5c5'}
      },
      topData: [
        {
          title: 'BC类总体满足率',
          target: '90%',
          realValue: '80%',
          items: [
            {title: '销售产品', url: '#'},
            {title: '销售税条件', url: '#'},
            {title: '销售合计', url: '#'}
          ]
        },
        {
          title: '4小时到位率',
          target: '90%',
          realValue: '80%',
          items: [
            {title: '税务类别', url: '#'},
            {title: '税务标准', url: '#'},
            {title: '税务描述', url: '#'}
          ]
        },
        {
          title: '24小时完工率',
          target: '90%',
          realValue: '80%',
          items: [
            {title: '税务类别', url: '#'},
            {title: '税务标准', url: '#'},
            {title: '税务描述', url: '#'}
          ]
        },
      ],
      bottomData: [
        {
          title: '本月申请单',
          target: '1500'
        },
        {
          title: '本月未发单',
          target: '90%'
        },
        {
          title: '24小时签收率',
          target: '90%'
        },
        {
          title: '48小时签收率',
          target: '90%'
        },
        {
          title: '7天签收率',
          target: '90%'
        },
      ],
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, ]
    }
  },
  methods: {
    initTopLeftChart() {
      const chartDom = document.getElementById('topLeftR');
      let myChart1 = echarts.init(chartDom);
      this.echartsGroup.push(myChart1)
      let option;

      option = {
        graphic:[
          {
            type:'text',
            left:'center',
            top:'46%',
            z:10,
            style:{
              fill:'black',
              fontSize:13,
              text:'占比'
            }
          },
        ],
        tooltip: {
          trigger: 'item'
        },
        title: {
          show: true,
          text: "投诉信息来源",
        },
        legend: {
          bottom:'2%',
          left: 'center',
          itemHeight: 10, // 修改icon图形大小
          itemGap: 4, // 修改间距
          textStyle: {
            fontSize: 10,
          },
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct4' },
              { value: 735, name: 'Direct3' },
              { value: 735, name: 'Direct2' },
              { value: 735, name: 'Direct1' },
            ]
          }
        ]
      };

      option && myChart1.setOption(option);

    },
    initTopRightChart() {
      const chartDom = document.getElementById('topRight');
      let myChart2 = echarts.init(chartDom);
      this.echartsGroup.push(myChart2)
      let option;

      option = {
        title: {
          show: true,
          // text: "主标题",
        },
        grid: {
          left: '8%',
          right: '8%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['无效', '处理中', '有效']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [60, 20,10],
            type: 'bar',
          }
        ]
      };

      option && myChart2.setOption(option);

    },
    initMiddleLeftChart() {
      const chartDom = document.getElementById('middleLeft');
      let myChart3 = echarts.init(chartDom);
      this.echartsGroup.push(myChart3)

      let option;
      option = {
        title: {
          text: '客户投诉趋势分析'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          // feature: {
          //   saveAsImage: {}
          // }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Email',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Union Ads',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },

        ]
      };
      option && myChart3.setOption(option);

    },
    initBottomChart() {
      const chartDom = document.getElementById('bottomChart');
      let myChart4 = echarts.init(chartDom);
      this.echartsGroup.push(myChart4)
      let option;

      option = {
        title: {
          show: true,
          text: "主标题",
        },
        grid: {
          left: '8%',
          right: '8%',
          bottom: '1%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['无效', '处理中', '有效']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [60, 20,10],
            type: 'bar',
            // showBackground: true,
            // backgroundStyle: {
            //   color: 'rgba(180, 180, 180, 0.2)'
            // }
          }
        ]
      };
      option && myChart4.setOption(option);

    },
  },
  mounted() {
  }
};
</script>
<style lang="scss" scoped>
@import "src/styles/conversion.scss";

.ele-body {
  font-size: px2vh(16);
  display: flex;
  justify-content: center;
  flex-direction: column;
  //background-color: ;
}

.flex {
  display: flex;
  box-sizing: border-box;
  margin-top: px2vh(10);

  > div:first-child {
    width: 50%;
    height: px2vh(267);
    background-color: #fff;
    margin-right: px2vw(10);
    border-radius: px2vw(10);
  }

  > div:nth-child(2) {
    width: 50%;
    height: px2vh(267);
    background-color: #fff;
    border-radius: px2vw(10);
  }
}

.topBox {
  .topLeft {
    font-size: px2vh(14);
    box-sizing: border-box;
    padding: 0 px2vw(20);
    display: flex;
    align-items: center;
    .topLeftL {
      color: white;
      border-radius: px2vh(10);
      box-sizing: border-box;
      padding: 20px;
      width: 50%;
      height: 80%;
      background: #6ab7ff;
      .topLeftLT{
        >div{
          margin-bottom: px2vh(30);
        }
      }
      .topLeftLB {
        height: 50%;
        display: flex;
        justify-content: space-around;
        .topLeftLBItem{
          border-radius: px2vh(10);
          background: #97ccff;
          width: 30%;
          margin-right: 3%;
          height: 80%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          flex-direction: column;
        }
      }
    }

    .topLeftR {
      width: 50%;
      height: 100%;
      box-sizing: border-box;
      padding: px2vh(10) px2vw(10);
    }
  }

  .topRight {

  }
}
.middleBox{
  z-index: 999;
  .middleLeft{
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    height: 54%;
  }
  .middleRight{
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.bottomBox{
  background-color: #fff;
  border-radius: px2vw(10);
  height: px2vh(267);
  margin-top: px2vh(10);
  .bottomChart{
    height: 60%;
  }
}

</style>
